<template>
  <div class="swiper-main">
    <swiper :option="swiperOption">
        <swiperSlide 
        v-for="(item,index) in swiperList" 
        :key="index"
        >
            <img :src="item.imgUrl" alt="">
        </swiperSlide>
    </swiper>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper , swiperSlide } from 'vue-awesome-swiper'
export default {
    props:{
            swiperList :Array,
        },
    name:'Swiper',
    components:{
        swiper,
        swiperSlide
    },
    data(){
        return {
            swiperOption:{
                autoplay:3000,
                speed:1000,
                pagination:{
                    el:'.swiper-pagination',
                }
            }
        }
    }
}   
</script>

<style scoped>
.swiper-main{
    position: relative;
    width: 100%;
    height: 4.4rem;
    margin-top: 3rem;
}
.swiper-container{
    width: 100%;
    height: 4.4rem;
}
.swiper-container img{
    width: 100%;
    height: 4.4rem;
}
.swiper-pagination{
    width: 100%;
    bottom: 0px;
}
::v-deep .swiper-paginaiton-bullet-active{
    background-color: #b0352f;
}
::v-deep .swiper-paginaiton-bullet{
    margin: 0 0.08rem;
}
</style>